<template>
    <div class="user-profile">
        <van-nav-bar
            class="page-nav-bar"
            title="个人信息"
            left-arrow
            @click-left="$router.back()"
        />

        <input type="file" hidden ref="file" @change="onFileChange"/>
        <van-cell title="头像" is-link @click="$refs.file.click()" >
            <template #value>
                <van-image
                    class="avatar"
                    fit="cover"
                    round
                    :src="user.photo"
                    />
            </template>
        </van-cell>
        <van-cell title="昵称" :value="user.name" is-link @click="isUpdateNameShow = true"></van-cell>
        <van-cell title="性别" :value="user.gender===0?'男':'女'" is-link @click="isUpdateGenderShow = true"></van-cell>
        <van-cell title="生日" :value="user.birthday" is-link @click="isUpdateBirthdayShow = true"></van-cell>


        <van-popup
            v-model:show="isUpdateNameShow"
            position="bottom"
            :style="{ height: '100%' }">
            <update-name v-if="isUpdateNameShow"
                :name="user.name"
                @close="isUpdateNameShow=false"
                @change-confirm="user.name=$event"/>
        </van-popup>

        <van-popup
            v-model:show="isUpdateGenderShow"
            position="bottom">
            <update-gender  v-if="isUpdateGenderShow"
            :gender="genderArr"
            @close="isUpdateGenderShow=false"
            @change-confirm="user.gender=$event"/>
        </van-popup>

        <van-popup
            v-model:show="isUpdateBirthdayShow"
            position="bottom">
            <UpdateBirthday v-if="isUpdateBirthdayShow"
            @close="isUpdateBirthdayShow=false"
            @update-birthday="user.birthday=$event"/>
        </van-popup>

        <van-popup
            v-model:show="isUpdatePhotoShow"
            position="bottom"
            :style="{ height: '100%' }">
            <updatePhoto :img="img" @close="isUpdatePhotoShow=false"/>
        </van-popup>

    </div>
</template>
<script>
import { getUserProfile } from '@/apis/user'
import { showFailToast } from 'vant'
import UpdateName from './component/update-name.vue'
import UpdateGender from './component/update-gender.vue'
import UpdateBirthday from './component/update-birthday.vue'
import updatePhoto from './component/update-photo.vue'

export default {
    data() {
        return {
            user: {},
            isUpdateNameShow: false,
            isUpdateGenderShow: false,
            isUpdateBirthdayShow: false,
            genderArr:[],
            isUpdatePhotoShow: false,
            img:null
        };
    },
    components: {
        UpdateName,
        UpdateGender,
        UpdateBirthday
    },
    created() {
        this.loadUserProfile();
    },
    methods: {
        async loadUserProfile() {
            try {
                const { data: res } = await getUserProfile();
                console.log(res);
                this.user = res.data;
                this.genderArr.push(this.user.gender)
                console.log(this.genderArr);
            }
            catch (error) {
                showFailToast("获取信息失败", error);
            }
        },
        // onChangeName(e) {
        //     // this.isUpdateNameShow = false
        //     this.user.name = e
        // },
        onFileChange() {
            const file = this.$refs.file.files[0];
            const data = window.URL.createObjectURL(file)
            this.img = data
            this.isUpdatePhotoShow = true
            this.$refs.file.value = ''
        }
    },
    
    components: { UpdateName, UpdateGender, UpdateBirthday,updatePhoto }
}
</script>
<style lang="less" scoped>
.user-profile {
    .avatar {
        width: 30px;
        height: 30px;
    }
    :deep(.van-popup) {
        background-color: #f8f8f8;
    }
}
</style>